// Handsontable Button
//  Used in Dropdown Menu

@mixin output {
  .handsontable {
    // Button
    .htUIInput.htUIButton input, .ht-button {
      min-width: 64px;
      padding: var(--ht-button-vertical-padding) var(--ht-button-horizontal-padding);
      font-family: inherit;
      font-size: var(--ht-font-size);
      line-height: var(--ht-line-height);
      font-weight: var(--ht-font-weight);
      border-radius: var(--ht-button-border-radius);
      border-width: 1px;
      border-style: solid;
      box-sizing: border-box;
      outline: none !important;
      cursor: pointer;
      transition: var(--ht-table-transition) all ease-in-out;
    }

    .htUIInput.htUIButtonCancel input, .ht-button--secondary {
      border-color: var(--ht-secondary-button-border-color);
      background-color: var(--ht-secondary-button-background-color);
      color: var(--ht-secondary-button-foreground-color);

      &:hover {
        border-color: var(--ht-secondary-button-hover-border-color);
        background-color: var(--ht-secondary-button-hover-background-color);
        color: var(--ht-secondary-button-hover-foreground-color);
      }

      &:disabled {
        border-color: var(--ht-secondary-button-disabled-border-color);
        background-color: var(--ht-secondary-button-disabled-background-color);
        color: var(--ht-secondary-button-disabled-foreground-color);
      }

      &:focus {
        border-color: var(--ht-secondary-button-focus-border-color);
        background-color: var(--ht-secondary-button-focus-background-color);
        color: var(--ht-secondary-button-focus-foreground-color);
        box-shadow: 0 0 0 1px var(--ht-accent-color);
      }
    }
  }

  .htUIInput.htUIButtonOK input, .ht-button--primary {
    border-color: var(--ht-primary-button-border-color);
    background-color: var(--ht-primary-button-background-color);
    color: var(--ht-primary-button-foreground-color);

    &:hover {
      border-color: var(--ht-primary-button-hover-border-color);
      background-color: var(--ht-primary-button-hover-background-color);
      color: var(--ht-primary-button-hover-foreground-color);
    }

    &:disabled {
      border-color: var(--ht-primary-button-disabled-border-color);
      background-color: var(--ht-primary-button-disabled-background-color);
      color: var(--ht-primary-button-disabled-foreground-color);
    }

    &:focus {
      border-color: var(--ht-primary-button-focus-border-color);
      background-color: var(--ht-primary-button-focus-background-color);
      color: var(--ht-primary-button-focus-foreground-color);
      box-shadow: 0 0 0 1px var(--ht-accent-color);
    }
  }
}
